<template>
	<view class="index">
		<view class="index-header" :style="{paddingTop:headerBarTop + 'px'}">
			<view class="title">启航掌柜</view>
			<view class="data">
				<view class="txt">我的累积收益(元)</view>
				<view class="num" @click="goURl('/pages/userInfo/income')">{{benefitList.total_benefit?benefitList.total_benefit:0}}</view>
			</view>
			<view class="ul">
				<view class="li">
					<view class="txt">今日收益(元)</view>
					<view class="num" @click="goURl('/pages/userInfo/income')">{{benefitList.today_benefit?benefitList.today_benefit:0}}</view>
				</view>
				<view class="li">
					<view class="txt">本月收益(元)</view>
					<view class="num" @click="goURl('/pages/userInfo/income')">{{benefitList.month_benefit?benefitList.month_benefit:0}}</view>
				</view>
			</view>
		</view>
		<view class="index-tab">
			<view class="tab-item" v-for="(item,index) in tab" :key="index" @tap.stop="changeTab(item)">
			<image class="img" :src="IMAGE_STATIC+'/index/icon-'+(index+1)+'.png'" mode="heightFix" />
			<view class="name">{{item.name}}</view>
			</view>
		</view>	
		<!-- 最新公告 -->
		<view class="notice" @tap.stop="goURl('/pages/notice/notice')">
			<view class="left">公告</view>
			<view class="right">{{ notice.notice_title }}</view>
		</view>
		<!-- 累计数据 -->
		<view class="index-data">
			<view class="top">
				<view class="txt">累计数据</view>
				<!-- <image class="ico" :src="IMAGE_STATIC+'/index/data.png'" mode=""/> -->
			</view>
			<view class="info">
				<view class="txt">近12个月交易量(元)</view>
				<view class="num">{{middleData.nearly_month12_trade?viewCount(middleData.nearly_month12_trade):0}}</view>
			</view>
			<view class="info1">
				<view class="item" @click="goURl('/pages/team/team')">
					<image class="ico" :src="IMAGE_STATIC+'/index/icon-001.png'" mode=""/>
					<view class="right">
						<view class="txt">团队数(人)</view>
						<view class="num">{{middleData.under_num || 0}}</view>
					</view>
				</view>
				<view class="item" @click="goURl('/pages/machineManage/merchantManage')">
					<image class="ico" :src="IMAGE_STATIC+'/index/icon-002.png'" mode=""/>
					<view class="right">
						<view class="txt">商户数(人)</view>
						<view class="num">{{middleData.merchant_num || 0}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部导航 -->
		<initTabbar :current-page="0" />
	</view>
</template>

<script>
import initTabbar from '@/pagesMain/init-tabbar.vue';

export default {
	components: {
		initTabbar,
	},
	data () {
		return {
			IMAGE_STATIC: this.$url.assetsPath, // 静态图片地址
			headerBarTop: 0,   //搜索栏的外边框高度，单位px
			headerBarHeight: 0,  //搜索栏的高度，单位px
			currIndex:0,
			benefitList:{},
			middleData:{},
			type:'',
			tab:[
				{name:'线上物料',path:'/pages/goods/goodsList?value1=1'},
				{name:'机具管理',path:'/pages/machineManage/machineManage'},
				{name:'商户管理',path:'/pages/machineManage/merchantManage'},
				{name:'团队管理',path:'/pages/team/team'},
				{name:'奖励进度',path:'/pages/rewardProgress/rewardProgress'},
				{name:'积分物料',path:'/pages/goods/goodsList?value1=2'},
				{name:'邀请好友',path:'/pages/share/share'},
				{name:'分红统计',path:'/pages/dividend/dividend'}
			],
			notice:{
				notice_title:''
			},
			usermsg: {},
		};
	},
	 // 下拉刷新
	 onPullDownRefresh() {
    console.log('refresh');
    this.init();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 500);
  },
	onLoad () {
		// this.headerBarTop = 20
		// #ifdef MP-WEIXIN 
		// let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		// this.headerBarTop = menuButtonInfo.top;
		// this.headerBarHeight = menuButtonInfo.height;
		// #endif 
		this.init()
		this.getQiNiuToken()
	},
	onShow() {
		this.getUserInfo();
	},
	methods: {
		init(){
			let isLogin = uni.getStorageSync('token') != '';
			console.log("isLogin：",isLogin);
			if(isLogin){
				// this.getUserInfo();
				this.getData()
				this.getMiddleData()
				this.getNewNotice()
			}else{
				uni.removeStorageSync('usermsg');
			}
		},
		// 查询首页头部汇总
		getData(){
			const data={
			}
			this.$Ajax('/api/summary/page/getPageHeaderData',data,res => {
					if(res.success){
						this.benefitList = res.data
					}
				})
		},
		// 查询首页中间汇总
		getMiddleData(){
			const data={
			}
			console.log('data',data)
			this.$Ajax('/api/summary/page/getPageMiddleData',data,res => {
					if(res.success){
						this.middleData = res.data
					}
				})
		},
		// 获取最新公告
		getNewNotice(){
			const data={
			}
			this.$Ajax('/api/system/notice/getNewNotice',data,res => {
					if(res.success){
						this.notice = res.data.noticeInfo
					}
				})
		},
		// 点击图标
		changeTab(item){
			let isLogin = uni.getStorageSync('token') != '';
			console.log("isLogin：",isLogin);
			if (isLogin) {
				if(!this.usermsg.real_name && item.name !='线上物料' && item.name !='积分物料'){
					if(item.name=='邀请好友'){
						setTimeout(()=>{
							this.$tools.toastJump('请先实名','/pages/setup/editUserInfo')
						},500)
						return
					}
					const that = this
					uni.showModal({
						title: '温馨提示',
						content: '为了方便您使用其他功能，请您先实名',
						success: function (res) {
							if (res.cancel) {
									console.log('用户点击取消');
									// 用户点击确定，继续执行跳转
									that.$tools.jump(item.path)
									return true;
								}
								if (res.confirm) {
									console.log('用户点击确定');
									setTimeout(()=>{
										that.$tools.jump('/pages/setup/editUserInfo')
									},500)
							}
						}
					})	
				}else{
					this.$tools.jump(item.path)
				}
			}else{
				// this.$tools.jump('/pages1/operate/login');
				this.$tools.toastRedirectTo('登录已失效，请重新登录', '/pages1/firtPage/firtPage');
			}
		},
		// 点击跳转
		goURl(path){
			let isLogin = uni.getStorageSync('token') != '';
			console.log("isLogin：",isLogin);
			if (isLogin) {
				if(!this.usermsg.real_name){
					// setTimeout(()=>{
					// 	this.$tools.toastJump('请先实名','/pages/setup/editUserInfo')
					// },500)
					const that = this
					uni.showModal({
						title: '温馨提示',
						content: '为了方便您使用其他功能，请您先实名',
						success: function (res) {
							if (res.cancel) {
									console.log('用户点击取消');
									// 用户点击确定，继续执行跳转
									that.$tools.jump(path)
									return true;
								}
								if (res.confirm) {
									console.log('用户点击确定');
									setTimeout(()=>{
										that.$tools.jump('/pages/setup/editUserInfo')
									},500)
							}
						}
					})	
				}else{
					this.$tools.jump(path)
				}
			}else{
				// this.$tools.jump('/pages1/operate/login');
				this.$tools.toastRedirectTo('登录已失效，请重新登录', '/pages1/operate/login');
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.index{
	overflow: hidden;
	height: 100vh;
	height: calc(100vh - 130rpx);
	// padding-bottom: 200rpx;
	.index-header{
		height: 440rpx;
		background: linear-gradient( 143deg, #E15534 0%, #C03733 95%);
		padding: 0 48rpx;
		padding-top: 20rpx !important;
		/* #ifdef MP-WEIXIN */
		padding-top:calc(20rpx + var(--status-bar-height)) !important;
		/* #endif */
		.title{
			width: 100%;
			text-align: center;
			font-weight: 500;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 47rpx;
		}
		.data{
			margin-top: 32rpx;
			color: #FFFFFF;
			/* #ifdef MP-WEIXIN */
			margin-top: 20rpx !important;
			/* #endif */
			.txt{
				font-size: 32rpx;
				color: #FFFFFF;
				height: 38rpx;
				line-height: 38rpx;
			}
			.num{
				font-size: 48rpx;
				color: #FFFFFF;
				height: 68rpx;
				line-height: 56rpx;
				margin-top: 28rpx;
			}
		}
		.ul{
			@include flexLeft;
			margin-top:20rpx;
			/* #ifdef MP-WEIXIN */
			margin-top: 10rpx !important;
			/* #endif */
			.li{
				width: 50%;
				position: relative;
				.txt{
				font-size: 24rpx;
				color: rgba(255,255,255,0.6);
			}
			.num{
				margin-top: 14rpx;
				font-size: 36rpx;
				color: #FFFFFF;
			}
			}
			.li:nth-of-type(2){
				padding-left: 76rpx;
			}
			.li:nth-of-type(2)::before{
				content: '';
				width: 0rpx;
				height: 30rpx;
				border-radius: 2rpx;
				border: 2rpx solid #FFFFFF;
				opacity: 0.34;
				position: absolute;
				top: 50%;
				left: 0;
			}
		}
	}
	.index-tab{
		width: 96%;
		margin: auto;
		margin-top: -70rpx;
		/* #ifdef MP-WEIXIN */
		margin-top: -50rpx;
		/* #endif */
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx 32rpx;
		overflow: hidden;
		@include flexLeft;
		flex-wrap: wrap;
		height:300rpx;
		.tab-item{
			width: 25%;
			text-align: center;
			margin-top: 24rpx;
			.img{
				width: 64rpx;
				height: 72rpx;
				margin: auto;
			}
			image{
				width: 100%;
				height: 100%;
			}
			.name{
				margin-top: 10rpx;
				color: #222229;
				font-weight: 6500;
				font-size: 24rpx;
				line-height: 28rpx;
			}
		}
		.tab-item:nth-of-type(1),.tab-item:nth-of-type(2),.tab-item:nth-of-type(3),.tab-item:nth-of-type(4){
			margin-top: 0;
		}
	}
	.index-data{
		overflow: hidden;
		width: 96%;
		margin: auto;
		margin-top: 20rpx;
		background: #fff;
		border-radius: 16rpx;
		padding:  32rpx;
		overflow: hidden;
		height: calc((100% - 840rpx ));
		@include flexBetweenColumn;
		align-items: unset;
		.top{
			@include flexBetween;
			.txt{
				font-weight: 600;
				font-size: 32rpx;
				color: #333333;
			}
			.ico{
				width: 32rpx;
				height: 32rpx;
			}
		}
		.info{
			margin-top: 24rpx;
			text-align: center;
			background: url($uni-static-dir+'/index/index-dataBg.png') no-repeat;
			background-size: 100% 100%;
			.txt{
				font-size: 28rpx;
				color: #666;
			}
			.num{
				font-weight: 600;
				font-size: 64rpx;
				color: #AD2926;
				line-height: 75rpx;
				margin-top: 8rpx;
			}
		}
		.info1{
			@include flexBetween;
			margin-top: 30rpx;
			.ico{
				width: 72rpx;
				height: 72rpx;
				margin-right: 16rpx;
			}
			.item{
				width: 50%;
				@include flexLeft;
				padding-left: 36rpx;
				.txt{
				font-size: 28rpx;
				color: #666;
			}
			.num{
				font-weight: 600;
				font-size: 32rpx;
				color: #333;
				line-height: 38rpx;
				margin-top: 8rpx;
			}
			}
		}
	}
	.index-data1{
		overflow: hidden;
		width: 96%;
		margin: auto;
		margin-top: 20rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 44rpx 32rpx;
		overflow: hidden;
		.top{
			@include flexBetween;
			.txt{
				font-weight: 600;
				font-size: 32rpx;
				color: #333333;
			}
			.ico{
				width: 20rpx;
				height: 20rpx;
				margin: auto;
			}
			.right{
				@include flexLeft;
				font-size: 24rpx;
				color: #999;
			}
		}
		.info{
			@include flexBetween;
			margin-top: 64rpx;
			.ico{
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
			.ico-box{
				width: 72rpx;
				height: 72rpx;
				margin-right: 16rpx;
				padding-left: 48rpx;
			}
			.item{
				width: 50%;
				@include flexLeft;
				padding-left: 36rpx;
				.txt{
					font-size: 28rpx;
					color: #666;
					@include flexLeft;
				}
			.num{
				font-weight: 600;
				font-size: 32rpx;
				color: #AD2926;
				line-height: 38rpx;
				margin-top: 8rpx;
			}
			}
		}
		.info1{
			@include flexBetween;
			margin-top: 64rpx;
			.item{
				width: 33.3%;
				text-align: center;
				.ico{
					margin-right: 8rpx;
					width: 32rpx;
					height: 32rpx;
					display: inline-block;
					vertical-align: middle;
				}
				.txt{
					font-size: 28rpx;
					color: #333;
				}
				.num{
					font-weight: 600;
					font-size: 32rpx;
					color: #333;
					line-height: 38rpx;
					margin-top: 8rpx;
				}
				.dot{
					display: inline-block;
					width: 20rpx;
					height: 20rpx;
					margin-right: 16rpx;
					background: #00C15A;
				}
				.dot1{
					background: #F69B36;
				}
				.dot2{
					background: #0182FE;
				}
			}
		}
	}
	.index-data2{
		overflow: hidden;
		width: 96%;
		margin: auto;
		margin-top: 20rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 44rpx 32rpx;
		overflow: hidden;
		.title{
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
		}
		.tab{
			@include flexLeft;
			width: 450rpx;
			margin: auto;
			margin-top: 28rpx;
			height: 72rpx;
			border-radius: 152rpx;
			border: 2rpx solid #666666;
			overflow: hidden;
			.item{
				font-size: 30rpx;
				color: #999999;
				width: 150rpx;
				text-align: center;
				height: 72rpx;
				line-height: 72rpx
			}
			.active{
				background: #AD2926;
				color:#fff;
				border-radius: 152rpx;
			}
		}
		.info{
			@include flexBetween;
			flex-wrap: wrap;
			margin-top: 64rpx;
			.item{
				width: 33.3%;
				text-align: center;
				margin-top: 58rpx;
				.ico{
					margin-right: 8rpx;
					width: 32rpx;
					height: 32rpx;
					display: inline-block;
					vertical-align: middle;
				}
				.txt{
					font-size: 28rpx;
					color: #999;
				}
				.num{
					font-weight: 600;
					font-size: 32rpx;
					color: #333;
					line-height: 38rpx;
					margin-top: 8rpx;
				}
			}
		}
	}
	.index-data3{
		overflow: hidden;
		width: 96%;
		margin: auto;
		margin-top: 20rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 44rpx 32rpx;
		overflow: hidden;
		.title{
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
		}
		.chart-box{
			@include flexBetween;
			margin-top: 54rpx;
			padding: 0 36rpx;
			.chart{
				width: 250rpx;
				height: 250rpx;
			}
			.info{
				width: 50%;
				height: 250rpx;
				@include flexBetweenColumn;
				.item{
					width: 100%;
					@include flexBetween;
					font-size: 24rpx;
					color: #000;
				}
				.p{
					font-size: 32rpx;
					color: #000;
				}
				.num{
					margin-top: 8rpx;
				}
				.dot{
					display: inline-block;
					width: 16rpx;
					height: 16rpx;
					margin-right: 10rpx;
					background: #AD2926;
					border-radius: 100%;
				}
				.dot1{
					background: #FFBB20;
				}
			}
		}
	}
	.notice{
		overflow: hidden;
		overflow: hidden;
		width: 96%;
		margin: auto;
		margin-top: 20rpx;
		background: #fff;
		border-radius: 16rpx;
		padding:  32rpx;
		height: 100rpx;
		@include flexLeft;
		.left{
			font-size: 32rpx;
			font-weight: bold;
			width: 100rpx;
			border-right: 1px solid #eee;
			margin-right: 10rpx;
		}
		.right{
			font-size: 28rpx;
			margin-left: 10rpx;
			width: calc(100% - 110rpx);
		}
	}
	image{
		width: 100%;
		height: 100%;
	}
}

// 大尺寸的
@media (min-height: 812px) {
	.index .index-header{
		height: 560rpx;
	}
	.index .index-header .data{
		margin-top: 50rpx !important;
	}
	.index .index-header .ul{
		margin-top: 80rpx !important;
	}
	.index .index-tab{
		height: 30%;
	}
	.index .index-data{
		height: calc((70% - 660rpx ));
	}
}
</style>
